<template>
	<view class="declaration-order">
		<!-- 选择地址 -->
		<view class="box address" @click="select_address">
			<image class="icon-address" :src="$util.img('/upload/uniapp/declaration/icon-address.png')"></image>
			<view class="address-content">
				<view class="address-contact">
					<view class="contact-name font-address">{{address.name}}</view>
					<view class="contact-mobile font-address">{{address.mobile?address.mobile:address.telephone}}</view>
				</view>
				<view class="address-detail font-address">{{address?address.full_address + address.address:'请选择地址'}}</view>
			</view>
			<image class="icon-arrow" :src="$util.img('/upload/uniapp/declaration/icon-arrow.png')"></image>
		</view>
		<!-- 用户手机号检测 -->
		<view class="box mobile-check">
			<view class="check-box">
				<input class="check-input" type="text" value="" @input="onKeyInput" placeholder="请输入用户平台注册手机号" />
				<view class="check-button" @click="chackPhone">检测</view>
			</view>
			<view class="check-result" v-if="checkResult === 'success'">检测成功！<text class="check-user">用户名称：{{searchResult.nickname}}</text></view>
			<view class="check-result" v-else-if="checkResult === 'fail'">检测失败！该账号没有在平台注册，请注册后重试</view>
		</view>
		<!-- 产品信息 -->
		<view class="box product">
			<image class="product-image" :src="goodsImg(goodsData.goods_image)" mode="aspectFit"></image>
			<view class="product-info">
				<view class="product-name">{{goodsData.goods_name}}</view>
				<view class="product-desc">
					<!-- <view class="product-desc-item">型号:大号</view> -->
					<!-- <view class="product-desc-item">颜色:白色的</view> -->
				</view>
				<view class="product-price">{{goodsData.price}}</view>
			</view>
			<view class="product-number">x1</view>
		</view>
		<view class="combined">
			<view class="combined-amount">合计: <view class="combined-value">¥{{goodsData.price}}</view>
			</view>
			<button class="combined-button" :disabled="!submitable" @click="toDebt" type="default">提交报单</button> 
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkResult:'',
				goodsData:'',
				searchPhone:'',//检测账号
				searchResult:'',//检测结果
				address:''//默认地址信息
			};
		},
		computed: {
			submitable() {
				return this.checkResult == 'success' ? true : false;
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: '提交报单'
			})
			this.goodsData = uni.getStorageSync("declarationGoods", this.selectGoods)
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.getAddressDetail()
			}
		},
		methods:{
			goodsImg(imgStr) {
				let imgs = imgStr.split(',');
				return imgs[0] ? this.$util.img(imgs[0], {
					size: 'mid'
				}) : this.$util.getDefaultImage().default_goods_img;
			},
			//获取默认地址
			getAddressDetail() {
				this.$api.sendRequest({
					url: '/api/memberaddress/info',
					data: {
						default:1
					},
					success: res => {
						let data = res.data;
						if (data != null) {
							this.address = data
						}
					},
				});
			},
			chackPhone(){
				if (!this.searchPhone) {
					return this.$util.showToast({ title: '请输入正确的用户账号！'});
				}
				this.$api.sendRequest({
					url: '/declaration/api/Declaration/checkUser',
					data: {
						mobile:this.searchPhone
					},
					success: res => {
						if(res.code==0){
							this.searchResult = res.data
							this.checkResult = 'success'
						}else if(res.code==-10001){
							this.checkResult = 'fail'
						}else{
							this.checkResult = ''
							this.$util.showToast({
								title: res.message
							});
						}
					},
				});
			},
			toDebt(){
				if (!this.searchPhone) {
					return this.$util.showToast({ title: '请输入检测用户账号！'});
				}
				this.$api.sendRequest({
					url: '/declaration/api/Declaration/placeOrder',
					data: {
						mobile:this.searchPhone,
						address_id:this.address.id,
						goods_id:this.goodsData.goods_id,
						sku_id:this.goodsData.sku_id
					},
					success: res => {
						if(res.code==0){
							this.goNav()
						}else{
							this.$util.showToast({
								title: res.message
							});
						}
					},
				});
			},
			onKeyInput:function(event){//获取输入手机号码
				this.searchPhone=event.target.value
			},
			select_address(){//选择地址
				var params = {
					back:'promotionpages/declaration/declaration-order',
					local: 0,
					type: 1
				}
				this.$util.redirectTo('/otherpages/member/address/address', params);
			},
			goNav(){
				this.$util.redirectTo('/promotionpages/declaration/order-list');
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './style.scss';

	.box {
		margin: 24rpx 30rpx;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}

	.address {
		@include flex(space-between, flex-start);

		.icon-address {
			width: 48rpx;
			height: 48rpx;
		}

		.address-content {
			margin-left: 24rpx;
			width: 530rpx;
			// margin-right: 48rpx;
			flex-grow: 2;
			.font-address {
				font-size: 28rpx;
				color: #303133;
				line-height: 40rpx;
			}

			.address-contact {
				@include flex(flex-start);


				.contact-name {}

				.contact-mobile {
					margin-left: 16rpx;
				}

				.address-detail {
					margin-top: 12rpx;
				}
			}
		}

		.icon-arrow {
			width: 34rpx;
			height: 34rpx;
			// @include bgm('icon-arrow.png')
		}
	}

	.mobile-check {
		.check-box {
			padding-left: 30rpx;
			width: 630rpx;
			height: 72rpx;
			background: #F5F5F5;
			border-radius: 36rpx;
			@include flex(space-between);
			.check-input {
				width: 400rpx;
				font-size: 28rpx;
				color: #909399;
			}

			.check-button {
				@include flex;
				width: 128rpx;
				height: 72rpx;
				background: #FF4544;
				border-radius: 36rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}

		.check-result {
			margin-top: 24rpx;
			font-size: 28rpx;
			color: #FF4544;
			line-height: 40rpx;
		}

		.check-user {
			color: #909399;
		}
	}
</style>
